<template>
  <div class="order-list">
    <order-header title="订单列表">
      <template v-slot:tip>
        <span>请谨防钓鱼链接或诈骗电话，了解更多></span>
      </template>
    </order-header>
    <div class="wrapper">
      <div class="listContainer">
        <el-tabs v-model="status" @tab-click="getOrderList">
          <el-tab-pane label="全部" name="all" style="width: 200px"></el-tab-pane>
          <el-tab-pane label="待付款" name="0"></el-tab-pane>
          <el-tab-pane label="待确认" name="1"></el-tab-pane>
          <el-tab-pane label="待发货" name="2"></el-tab-pane>
          <el-tab-pane label="已发货" name="3"></el-tab-pane>
          <el-tab-pane label="交易完成" name="4"></el-tab-pane>
        </el-tabs>
        <div class="order-box">
          <loading v-if="loading"></loading>
          <div v-for="(item, index) in list" :key="index" class="order-item-box" @click="goTo(item.orderNo)">
            <div class="order-item-header">
              <span style="margin-right: 10px;">订单时间：{{ item.createTime }}</span>
              <span>{{ item.orderStatusString }}</span>
            </div>
            <Card
              v-for="one in item.ecomOrderItemVOS"
              :key="one.orderId"
              :num="one.goodsCount"
              :price="one.sellingPrice"
              desc="全场包邮"
              :title="one.goodsName"
              :thumb="prefix(one.goodsCoverImg)"
            />
          </div>
          <no-data v-if="!loading && list.length === 0"></no-data>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import OrderHeader from './../components/OrderHeader'
import { getOrderList } from '../service/order'
import Loading from './../components/Loading'
import NoData from './../components/NoData'
import Card  from 'vant/lib/card';
import 'vant/lib/card/style';
export default {
  name: 'order-list',
  components: {
    Card,
    OrderHeader,
    Loading,
    NoData,
  },
  data() {
    return {
      loading: false,
      list: [],
      pageNum: 1,
      total: 0,
      status: 'all',
    }
  },
  mounted() {
    this.getOrderList()
  },
  methods:{
    async getOrderList() {
      let orderStatus = ''
      if(this.status === 'all') {
        orderStatus = ''
      } else {
        orderStatus = Number(this.status)
      }
      this.loading = true;
      this.busy = true;
      const res = await getOrderList({ pageNumber: this.pageNum, status: orderStatus })
      if(res.resultCode === 200)  {
        this.loading = false
        this.list = res.data.list
        this.total = res.data.totalCount
      }
      this.loading = false
    },
    goTo(id) {
      this.$router.push({ path: `detail?id=${id}` })
    },
    prefix(url) {
      if (url && url.startsWith("http")) {
        return url;
      } else {
        url = `http://localhost:8080${url}`;
        return url;
      }
    }
  }
}
</script>
<style>
.order-list {
  .wrapper {
    padding-top: 33px;
    padding-bottom: 110px;
    background: #f9f9f9;
    .listContainer {
      position: relative;
      width: 500px;
      margin-right: auto;
      margin-left: auto;
    }
    .order-box {
      .order-item-box {
        margin: 20px 10px;
        background-color: #fff;

        .order-item-header {
          padding: 10px 20px 0 20px;
          font-size: 16px;
        }
        .van-card {
          background-color: #fff;
          margin-top: 0;
        }
      }
    
    }
  }
}
</style>